import 'package:bigegg/page/main/page/home/xmm_home_controller.dart';
import 'package:bigegg/widget/image/xmm_circle_cached_network_image.dart';
import 'package:bigegg/widget/xmm_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../../global/routes/xmm_routes.dart';
import '../../../../res/xmm_img.dart';
import '../../../widget/xmm_article_list_view.dart';

class XmmHomePage extends StatefulWidget {
  const XmmHomePage({super.key});

  @override
  State<StatefulWidget> createState() {
    return XmmHomePageState();
  }
}

class XmmHomePageState extends State<XmmHomePage>
    with AutomaticKeepAliveClientMixin, TickerProviderStateMixin {
  XmmHomeController controller = Get.find<XmmHomeController>();

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
    controller.initData();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: Container(
        decoration:
            commonBgDecoration(bgImage: "assets/images/xmm_bg_home.png"),
        child: Container(
          alignment: Alignment.topLeft,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: context.mediaQueryPadding.top),
              Padding(
                  padding: const EdgeInsets.only(left: 20, right: 20),
                  child: topToolsWidget()),
              const SizedBox(height: 7),
              Padding(
                  padding: const EdgeInsets.only(left: 21),
                  child: Image.asset(XmmImg.homeTitleText, height: 78.w)),
              const SizedBox(height: 17),
              Padding(
                  padding: const EdgeInsets.only(left: 20),
                  child: topUserListWidget()),
              const SizedBox(height: 30),
              Padding(
                  padding: const EdgeInsets.only(left: 25),
                  child: Image.asset(XmmImg.homeAuthorHotListText, height: 18)),
              const SizedBox(height: 18),
              Obx(() => XmmArticleListView(
                  articleList: controller.hotArticleList.value)),
            ],
          ),
        ),
      ),
    );
  }

  Widget topToolsWidget() {
    return Stack(children: [
      Align(
        alignment: Alignment.centerLeft,
        child: Image.asset(XmmImg.homeLogoIcon, width: 62.w, height: 46.h),
      ),
      Align(
        alignment: Alignment.centerRight,
        child: GestureDetector(
          child: Image.asset(XmmImg.homePublishIcon, width: 38.w, height: 38.h),
          onTap: () => Get.toNamed(XmmRoutes.publishArticlePage),
        ),
      )
    ]);
  }

  Widget topUserListWidget() {
    return Obx(() {
      return SizedBox(
        height: 123.h,
        child: ListView.builder(
          primary: false,
          physics: const AlwaysScrollableScrollPhysics(),
          scrollDirection: Axis.horizontal,
          itemCount: controller.topArticleList.length,
          itemBuilder: (context, index) {
            var item = controller.topArticleList.elementAt(index);
            return GestureDetector(
              child: Container(
                padding: const EdgeInsets.only(right: 16),
                child: Stack(children: [
                  Container(
                    width: 120.w,
                    height: 123.h,
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.white, width: 1),
                      borderRadius: const BorderRadius.only(
                        topLeft: Radius.circular(16),
                        topRight: Radius.circular(32),
                        bottomLeft: Radius.circular(16),
                        bottomRight: Radius.circular(16),
                      ),
                      image: DecorationImage(
                        image: AssetImage(item.thumbnail ?? ""),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  Positioned(
                    top: 10.h,
                    right: 10.w,
                    width: 26.w,
                    height: 26.h,
                    child: GestureDetector(
                      onTap: () => XmmRoutes.routePersonPage(item.wallUser?.userId ?? ""),
                      child:  XmmCircleCachedNetworkImage(
                        imageUrl: item.wallUser?.getAvatarUrl ?? "",
                      ),
                    ),
                  )
                ]),
              ),
              onTap: () => Get.toNamed(
                XmmRoutes.articleDetailPage,
                arguments: item,
              ),
            );
          },
        ),
      );
    });
  }
}
